<template>
    <div class="push-dialog-container dialogHeaderFont">
      <div class="analysis-dialog">
        <el-dialog title="产品监控预警推送"
           width="92%" top="8vh" @close="$emit('update:showdialog', false)"
           :visible.sync="visible">
          <div class="push-dialog-content">
            <div class="push-dialog-item dialog-item-small">
              <div class="dialog-item-small-container">
                <div class="titleHeader">
                  推送消息
                </div>
                <div class="contentBody">
                  <div class="theme-container">
                    <el-input placeholder="请输入主题" v-model="themePush" :disabled="true">
                      <template slot="prepend" >主题</template>
                    </el-input>
                  </div>
                  <div class="content-container">
                    <div class="titleHeader">
                      内容
                    </div>
                    <div class="detail-dialog-content">
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          产品型号：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.productCode">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          产品名称：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.productName">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          监控指标：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.monitoringIndex">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          监控周期：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorCycle">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          监控异常时段：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorTimerange">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          指标值：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.monitor">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          预警值(月均销量)：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.indexValue">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          预警差值：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.dValue">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          差值比：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.differenceRatio">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          预警时间：
                        </div>
                        <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorTime">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="push-dialog-item dialog-item-max">
              <div class="dialog-item-max-container">
                <div class="titleHeader">
                  推送对象
                </div>
                <div class="contentBody pushBody">
                  <div class="push-item pushContainer">
                    <div class="push-object organizationContainer">
                      <div class="objectContainer">
                        <div class="titleHeader">
                          组织机构
                        </div>
                        <div class="organization">
                          <el-tree :data="renderOrganization"
                                   accordion :props="defaultProps" @node-click="handleOrganization"></el-tree>
                        </div>
                      </div>
                    </div>
                    <div class="push-object rangeContainer">
                      <div class="objectContainer">
                        <div class="titleHeader titleHeaderSet">
                          <div class="pushRange">
                            推送范围
                          </div>
                          <div class="pushRangeSet">
                            <el-radio-group @change="pushRadioSwitch" size="small" v-model="pushRadio">
                              <el-radio-button label="0">按岗位推送</el-radio-button>
                              <el-radio-button label="1">按人员推送</el-radio-button>
                            </el-radio-group>
                          </div>
                        </div>
                        <div class="pushRangeCont">
                          <div class="pushRangeItem" v-show="pushRadio == 0">
                            <el-table ref="multipleTableSet" max-height="235" stripe border :data="employeeItems"
                                      tooltip-effect="dark" size="mini" style="width:98%;" @selection-change="handleSelectionChangeStation">
                              <el-table-column
                                type="selection"
                                width="105">
                              </el-table-column>
                              <el-table-column
                                prop="postName"
                                label="岗位">
                              </el-table-column>
                            </el-table>
                          </div>
                          <div class="pushRangeItem" v-show="pushRadio == 1">
                            <el-table ref="multipleTableMine" max-height="235" stripe border :data="employeeItems"
                                      tooltip-effect="dark" size="mini" style="width:98%;" @selection-change="handleSelectionChangePeople">
                              <el-table-column
                                type="selection"
                                width="45">
                              </el-table-column>
                              <el-table-column
                                prop="employeeid"
                                label="员工编号"
                                width="110">
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="员工名称"
                                width="90">
                              </el-table-column>
                              <el-table-column
                                prop="positioame"
                                label="职位"
                                width="100">
                              </el-table-column>
                              <el-table-column
                                prop="postName"
                                label="岗位"
                                show-overflow-tooltip>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="push-item pushMode">
                    <div class="pushMode-item modeSet">
                      <div>消息推送方式</div>
                      <div>
                        <el-checkbox v-model="pusher">显示推送者信息</el-checkbox>
                      </div>
                    </div>
                    <div class="pushMode-item">
                      <el-checkbox-group v-model="pushItemsChecked" :min="1">
                        <el-checkbox v-for="push in pushOptions" :label="push.value" :key="push.value" :disabled="push.value==='appMessage'">{{push.label}}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <div class="push-item pushSend">
                    <div class="pushOperate">
                      <el-button type="primary" size="small" :loading="loadSet" style="width: 120px;" @click="pushMessageSend">推送</el-button>
                      <el-button size="small" style="width: 120px;" @click="$emit('update:showdialog', false)">取消</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as opreate from 'api/getData'
  import { treeSolve } from 'utils/mUtils'

  export default {
    name: "push-dialog",
    props: {
      showdialog: {
        type: Boolean,
        default: false
      }
    },
    computed:{
      ...mapGetters(["pushOptions","prodCtrolStateInfo","renderOrganization"]),
      themePush(){
        return `${this.prodCtrolStateInfo.productCode}${this.prodCtrolStateInfo.productName}${this.prodCtrolStateInfo.monitoringIndex}异常预警`
      }
    },
      data() {
        return {
          visible: this.showdialog,
          pushRadio: '0',
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          pushItemsChecked: ['textMessage'],
          pusher: true,
          multipleSelectionPeople: [],
          multipleSelectionStation: [],
          employeeItems: [],
          loadSet: false
        }
      },
      mounted() {
        this.loadSet = false
      },
      methods: {
        pushMessageSend(){
          let pushWay = this.pushItemsChecked.join(',')
          if(pushWay == ''){
            this.$message.error('请至少选择一种消息推送方式')
          }else {
            let staffNumSet = '1' == this.pushRadio ? this.$refs.multipleTableMine.selection : this.$refs.multipleTableSet.selection
            staffNumSet = Array.isArray(staffNumSet) ? staffNumSet.map(v => v.employeeid).join(',') : ''
            if(staffNumSet == ''){
              this.$message.error('请至少选择一个推送对象')
            }else {
              let tempSet = {
                pushType: 'productWarning',
                pushSubject: this.themePush,
                staffNum: staffNumSet,
                pushWay: pushWay
              }
              this.loadSet = true
              opreate.pushSendMessage(Object.assign(tempSet,this.prodCtrolStateInfo)).then(res => {
                this.loadSet = false
                if('200' == res.code){
                  this.$message.success('消息已成功推送')
                }else {
                  this.$message.error('消息推送失败')
                }
                this.$emit('update:showdialog', false)
              })
            }
          }
        },
        handleOrganization(newVal){
          this.initStateEmployee(newVal)
        },
        pushRadioSwitch(newVal){
          this.pushRadio = newVal
        },
        handleSelectionChangePeople(newVal) {
          this.multipleSelectionPeople = newVal
        },
        handleSelectionChangeStation(newVal) {
          this.multipleSelectionStation = newVal
        },
        initStateEmployee(newVal){
          opreate.getEmployeeSet({idList: treeSolve(newVal)}).then(res => {
            this.employeeItems = res.data
          })
        }
      },
      watch: {
        showdialog(visible){
          this.visible = visible
        },
        thisOrganizationTree(val){
          opreate.getEmployeeSet({idList: treeSolve(val[0])}).then(res => {
            this.employeeItems = res.data
          })
        }
      }
  }
</script>

<style scoped>
  .detail-dialog-content{
    background: white;
    padding: 5px 12px;
    border-radius: 4px;
  }
  .detail-dialog-item{
    display: flex;
    height: 30px;
    line-height: 30px;
    align-items: center;
  }
  .setColor{
    font-weight: 600;
  }
  .push-dialog-content{
    display: flex;
  }
  .titleHeader{
    font-weight: bold;
  }
  .dialog-item-small{
    flex: 1;
    display: flex;
  }
  .dialog-item-max{
    flex: 2;
    display: flex;
    justify-content: flex-end;
  }
  .dialog-item-small-container{
    width: 98%;
    background: white;
  }
  .dialog-item-max-container{
    width: 98%;
    background: white;
  }
  .contentBody{
    padding: 12px;
  }
  .pushBody{
    display: flex;
    flex-direction: column;
  }
  .content-container{
    border: 1px solid #E0E8EF;
    border-radius: 4px;
    margin-top: 10px;
  }
  .pushContainer{
    display: flex;
    margin-bottom: 10px;
    min-height: 268px;
  }
  .organizationContainer{
    display: flex;
    flex: 3;
  }
  .rangeContainer{
    display: flex;
    flex: 5;
    justify-content: flex-end;
  }
  .objectContainer{
    width: 98%;
    border: 1px solid #E0E8EF;
    border-radius: 4px;
  }
  .titleHeaderSet{
    justify-content: space-between;
    padding: 0 3px 0 10px;
  }
  .pushRangeSet{
    display: flex;
    align-items: center;
  }
  .pushRangeSet label{
    margin: 0 !important;
  }
  .pushRangeCont{
    padding: 10px 0px 10px 10px;
  }
  .pushMode{
    border: 1px solid #E0E8EF;
    padding: 5px 10px;
  }
  .modeSet{
    display: flex;
    justify-content: space-between;
  }
  .pushSend{
    display: flex;
    justify-content: center;
    padding: 10px 10px 0 10px;
  }
  .pushOperate{
    width: 320px;
    display: flex;
    justify-content: space-between;
  }
</style>
